<template>
  <div class="f-image" v-if="async">
    <div class="f-image_box" :style="`width: ${size}px;height: ${size}px;`">
      <el-icon :size="30" color="#999999">
        <Plus />
      </el-icon>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'dataModel',
    event: 'change'
  },
  props: {
    widget: {},
    dataModel: {},
    size: {
      default: 80
    }
  },
  data() {
    return {
      async: false,
      viewModel: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {   
      if (this.dataModel) {
        this.viewModel = this.dataModel        
      }
      this.async = true
    }
  }
}
</script>
<style lang="scss">
.f-image{
  .f-image_box{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px dashed #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
  }
}
</style>